<template>
  <div class="chat-container">
    <div class="top-da">
      <div class="top-nav">
        <div class="logo">
          <!-- ~@/assets -->
          <img src="../../../assets/logo.png" alt="Logo" />
          <div class="titleLogo">宇时</div>
        </div>
        <ul class="menu">
          <li v-for="item in menuItems" :key="item.id" class="menu-item" @click="btnGO(item.url)">
            <i :class="['iconfont', item.url  === '/home' ? 'icon-shouye' : 'icon-shuju']"></i>
            <a :href="item.url">{{ item.label }}</a>
          </li>

        </ul>
      </div>

      <div class="foldCont"><a href="/"><img src="../../../assets/fold.png" alt="Logo" /></a></div> 
      <div class="menuRight">
        <a href="/" class="gotoSub">注册登录</a>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  name: 'TopNav',
  mixins: [],
  components: {},
  data() {
    return {
      navInd:'1',
      menuItems: [
        { id: '1', label: '首页', url: '/home',icon:'icon-shuju' },
        { id: '2', label: 'AI聊天', url: '/user' ,icon:'icon-shuju'},
        { id: '3', label: 'AI绘画', url: '/user',icon:'icon-shuju' },
        { id: '4', label: 'AI应用', url: '/user' ,icon:'icon-shuju'},
      ],
    }
  },
 

  watch: {},

  mounted() {},
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    //选项卡下标
    btnGO(data){
      this.$router.push({ path: data })
    },
  },
}
</script>
  
  <style lang="less" scoped >
// @import '../../../../public/color.less';
// body{
//   background-color: #f6f6f6;
// }
.top-nav {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  line-height: 57px;
  height: 59px;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  float: left;
}

.logo {
  margin-right: 20px;
  // width: 165px;
  img {
    height: 32px;
  }
  .titleLogo {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    margin: 0 0 0 12px;
    color: #002140;
  }
}
ul {
  li {
    padding: 0 20px;
    display: flex;
    align-items: center;
    i {
      width: 14px;
      height: 14px;
      margin-right: 10px;
    }
    a {
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
  }
}
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  display: inline-block;
}
.menu-item:nth-child(1),.menu-item:hover{
  border-bottom: 2px solid #B81D22;
    color: #B81D22;
}

.menu-item a {
  text-decoration: none;
  color: #333;
}
.gotoSub {
  color: #fff;
  background: #7a46fc;
  border-color: #7a46fc;
  padding: 4px 15px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  float: right;
  margin-top: 14px;
  margin-right: 20px;
}
.chat-container{
  background: #4f4c4c;
}
.top-da{
  float: left;
  width: 100%;
  box-shadow: rgba(0, 0, 0, .15);
}
.foldCont{
  display: none;
}

@media screen and (max-width: 767px) {
  .top-da{
    padding: 10px;
  }
  .top-nav{
    display: none;
  }
  .foldCont{
    display: block;
    img{
      width: 30px;
      float: left;
    }
  }
  .gotoSub{
    margin: 0;
  }
}
</style>
  